<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('人员信息附件上传')" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <input type="hidden" id="infoId" name="infoId" th:value="${infoId}">
                        <div class="form-group">
                            <label class="font-noraml">多文件上传</label>
	                        <div class="file-loading">
					            <input id="file" name="file" type="file" multiple>
					        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <script th:inline="javascript">

        var prefix = ctx + "hrm/propertyInfo";
        var control = $('#file');
        var fileInfos = [[${fileInfos}]];
        var fileUrl = [];
        var fileConfig = [];

        $(function () {
            initOldFile();
            initFileInput();
        })

        function initOldFile() {
            // console.log(fileInfos)
            for(var i=0;i<fileInfos.length;i++){
                fileUrl.push(fileInfos[i].filePath);
                var tjson = {
                    caption:fileInfos[i].fileName,
                    url:prefix + '/removeAnnex',
                    key:fileInfos[i].fileId
                    // extra:{infoId:fileInfos[i].belongKey,filePath:fileInfos[i].filePath}
                };
                fileConfig.push(tjson);
            }
            // console.log(fileUrl)
        }
        
        function initFileInput() {
            control.fileinput({
                theme: 'explorer-fas',
                uploadUrl: prefix + '/infoUpload',
                overwriteInitial: false,
                showCaption: true,
                showRemove: false,
                showClose: false,
                initialPreviewAsData: true,
                initialPreviewFileType:'object',
                initialPreview: fileUrl,
                initialPreviewConfig:fileConfig
            });

            control.on("fileuploaded", function(event, data, proviewId, index) {
                // console.log(data.response);
                if(data.response.data!=null){
                    if(data.response.code == web_status.SUCCESS){
                        var newData = [];
                        newData.push({"name": "filePath", "value": data.response.data});
                        newData.push({"name": "infoId", "value": $('#infoId').val()});
                        newData.push({"name": "fileName", "value": data.response.msg});
                        $.ajax({
                            url:prefix+"/changePath",
                            type:"post",
                            dataType:"json",
                            data: newData,
                            beforeSend:function () {
                                $.modal.loading("正在上传图片，请稍后");
                                $.modal.disable();
                            },
                            success:function (result) {
                                if(result.code == web_status.SUCCESS){
                                    $.modal.msgSuccess("图片上传成功")
                                    location.reload();
                                    initFileInput();
                                }
                                $.modal.closeLoading();
                            }
                        })
                    }else{
                        $.modal.alertError("文件上传失败:"+data.response.msg)
                    }
                }else{
                    $.modal.alertError("文件上传失败")
                }
            });
        };

    </script>
</body>
</html>
